<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../libs/validator.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../libs/My97DatePicker/4.8/WdatePicker.js"></script>
    <title>学生考勤数据汇总</title>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="row">
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" v-model="q.key" @keyup.enter="query" placeholder="班级名称">
            </div>
            <div class="form-group col-sm-2">
                <select  class="form-control" id="College">
                </select>
            </div>
            <div class="form-group col-sm-2">
                <select  class="form-control" id="Class">
                </select>
                <div class="form-group col-sm-2">
                    <select  class="form-control" id="Student">
                    </select>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" onfocus="WdatePicker()" id="startDate" name="startDate" placeholder="开始时间"/>
            </div>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" onfocus="WdatePicker()" id="endDate" name="endDate"  placeholder="结束时间"/>
            </div>
        </div>
            <a class="btn btn-default" @click="query">查询</a>
            <a class="btn btn-primary" id="exportExcel" href="StudentInfo/export/12345?token=523c7e3f75ad8bb69b2703e8f7944c44"><i class="fa fa-pencil-square-o"></i>&nbsp;导出</a>
            <!--<a class="btn btn-primary" @click="export1"><i class="fa fa-plus"></i>&nbsp;导出</a>-->

        </div>
        <table id="jqGrid"></table >
        <div id="jqGridPager"></div>
    </div>
</div>
<script>
    $(function () {
        $("#jqGrid").jqGrid({
            url: baseURL + 'hello/selectStudentAttendence',
            datatype: "json",
            colModel: [
                { label: '日期', name: 'date', width: 40 ,key: true },
                { label: '第几节', name: 'whichIndex',index:'course_which_index', width: 40 },
                { label: '班级名称', name: 'className',index:'class_name' ,width: 40 },
                { label: '迟到人数', name: 'chidao', width: 40 },
                { label: '旷课人数', name: 'kuangke', width: 40 },
                { label: '早退人数', name: 'zaotui', width: 40 },
                { label: '请假人数', name: 'qingjia', width: 40 },
                { label: '出勤人数', name: 'chuqin', width: 40 },
                { label: '提交人姓名', name: 'operatorName',index:'operator_name', width: 40 },
            ],
            viewrecords: true,
            height: 385,
            rowNum: 10,
            rowList : [10,30,50],
            rownumbers: true,
            rownumWidth: 25,
            autowidth:true,
            multiselect: true,
            pager: "#jqGridPager",
            jsonReader : {
                root: "page.list",
                page: "page.currPage",
                total: "page.totalPage",
                records: "page.totalCount"
            },
            prmNames : {
                page:"page",
                rows:"limit",
                order: "order"
            },
            gridComplete:function(){
                //隐藏grid底部滚动条
                $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            },
            ondblClickRow:function(rowid){
                var rowData = $("#jqGrid").jqGrid('getRowData',rowid);
                var rowName =$("#jqGrid").jqGrid('getGridParam','colNames');
                var s="";
                var i=2;
                for(var key in rowData){
                    s=s+rowName[i++]+':'+rowData[key]+'<br> ';
                }
                alert(s);
            }
        });
        $("#exportExcel").attr('href',baseURL+'hello/export?token='+token);
        $.ajax({
            url: baseURL + "/college/getAllcollege",
            data: {},
            success: function (r) {
                $("#College").append("<option value=''>请选择</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i].collegeName;
                    var tid = r.list[i].collegeName;
                    $("#College").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
        $("#College").change(function () {
            $("#Class").empty();
            var college=$("#College").val();
            $.ajax({
                url: baseURL + "/college/getClassByCollege",
                data: {
                    college:college
                },
                success: function (r) {
                    $("#Class").append("<option value=''>请选择</option>");
                    for (i = 0; i < r.list.length; i++) {
                        var tname = r.list[i];
                        var tid = r.list[i];
                        $("#Class").append("<option value='" + tid + "'>" + tname + "</option>");
                    }
                }
            });
        });
        $("#Class").change(function () {
            $("#Student").empty();
            var classname=$("#Class").val();
            $.ajax({
                url: baseURL + "/college/getClassByCollege",
                data: {
                    college:college
                },
                success: function (r) {
                    $("#Class").append("<option value=''>请选择</option>");
                    for (i = 0; i < r.list.length; i++) {
                        var tname = r.list[i];
                        var tid = r.list[i];
                        $("#Class").append("<option value='" + tid + "'>" + tname + "</option>");
                    }
                }
            });
        });
    });
    var vm = new Vue({
        el: '#rrapp',
        data: {
            q: {
                key: null
            },
            showList: true,
            title: null,
            studentsAttendence: {},
            updateTime: null
        },
        methods: {
            query: function () {
                $("#exportExcel").attr('href',baseURL+'hello/export?token='+token+"&className="+vm.q.key);
                vm.reload();
            },
            reload: function () {
                vm.showList = true;
                var page = $("#jqGrid").jqGrid('getGridParam', 'page');
                $("#jqGrid").jqGrid('setGridParam', {
                    postData: {'className': vm.q.key},
                    page: page
                }).trigger("reloadGrid");
            }
        }
    });

</script>

</body>
</html>